<template>
  <div class="products-page">
    <NavBar />
    
    <!-- 页面标题区 -->
    <section class="page-header bg-gradient-to-r from-blue-600 via-blue-500 to-indigo-600 text-white py-24 relative overflow-hidden">
      <!-- 网格装饰 -->
      <div class="absolute inset-0 bg-[linear-gradient(to_right,#ffffff0d_1px,transparent_1px),linear-gradient(to_bottom,#ffffff0d_1px,transparent_1px)] bg-[size:24px_24px]"></div>
      
      <!-- 装饰元素 -->
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
        <div class="absolute -top-20 -left-20 w-80 h-80 rounded-full bg-white/10 blur-3xl"></div>
        <div class="absolute bottom-20 right-20 w-96 h-96 rounded-full bg-white/10 blur-3xl"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full bg-indigo-500/30 blur-2xl"></div>
        
        <!-- 缓慢脉冲动画装饰 -->
        <div class="absolute top-1/4 right-1/3 w-32 h-32 rounded-full bg-blue-300/20 blur-3xl animate-slow-pulse"></div>
        <div class="absolute bottom-1/3 left-1/4 w-40 h-40 rounded-full bg-indigo-300/20 blur-3xl animate-slow-pulse" style="animation-delay: 1s;"></div>
      </div>
      <div class="container mx-auto px-4 text-center relative z-10">
        <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold mb-6 tracking-tight animate-fade-in-up">
          {{ $t('nav.products') }}
        </h1>
        <p class="text-[clamp(1rem,2vw,1.5rem)] max-w-3xl mx-auto opacity-90 animate-fade-in-up delay-100">
          专业的工业胶水产品系列
        </p>
        <!-- 滚动指示 -->
        <div class="mt-12 animate-bounce">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mx-auto opacity-80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
          </svg>
        </div>
      </div>
    </section>
    
    <!-- 产品分类 -->
    <section class="product-categories py-6 md:py-12 bg-white/95 backdrop-blur-md sticky top-0 z-20 shadow-sm border-b border-blue-100/50">
      <div class="container mx-auto px-4">
        <div class="overflow-x-auto scrollbar-hide -mx-4 px-4">
          <div class="flex space-x-3 md:space-x-4 pb-2 md:pb-4 min-w-max">
            <button 
              v-for="category in categories" 
              :key="category.id"
              @click="activeCategory = category.id"
              class="px-4 md:px-6 py-2 md:py-3 rounded-full transition-all duration-700 transform hover:-translate-y-1 relative overflow-hidden group text-sm md:text-base whitespace-nowrap"
              :class="activeCategory === category.id ? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-md' : 'bg-gray-50 text-gray-700 hover:bg-gray-100'"
            >
              <span class="relative z-10 group-hover:translate-x-1 transition-transform duration-700">
                {{ category.name }}
              </span>
            </button>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 产品列表 -->
    <section class="products-list py-16 bg-gradient-to-b from-blue-50/20 via-white to-indigo-50/20 relative" ref="productsListRef">
      <!-- 装饰元素 -->
      <div class="absolute top-40 right-0 w-96 h-96 rounded-full bg-blue-50 blur-3xl"></div>
      <div class="absolute bottom-40 left-0 w-96 h-96 rounded-full bg-blue-50 blur-3xl"></div>
      
      <div class="container mx-auto px-4">
        <div class="text-center mb-12 opacity-0 transform translate-y-8 transition-all duration-700" ref="productsTitleRef">
          <div class="w-24 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mx-auto mb-6 rounded-full"></div>
          <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700">
            {{ activeCategory === 0 ? '全部产品' : categories.find(c => c.id === activeCategory)?.name }}
          </h2>
          <p class="text-gray-600 max-w-2xl mx-auto">
            {{ activeCategory === 0 ? '我们提供全面的工业胶水解决方案' : `专业${categories.find(c => c.id === activeCategory)?.name}系列产品` }}
          </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8">
          <div 
            v-for="product in displayProducts" 
            :key="`page-${currentPage}-product-${product.id}`"
            class="product-card bg-white rounded-xl shadow-md overflow-hidden border border-transparent hover:border-blue-200 hover:shadow-xl transition-all duration-700 transform hover:-translate-y-2 opacity-0 translate-y-10 relative"
                 :style="{ borderTop: '4px solid ' + getCategoryColor(product.categoryId) }"
          >
            <div class="product-image aspect-[2/1] bg-gradient-to-br from-blue-50 to-indigo-50 flex items-center justify-center border border-blue-10 relative overflow-hidden group">
              <!-- 装饰光点 -->
              <div class="absolute top-1/4 left-1/4 w-20 h-20 rounded-full bg-blue-400/10 blur-xl group-hover:opacity-70 transition-opacity duration-700"></div>
              <div class="absolute bottom-1/3 right-1/3 w-24 h-24 rounded-full bg-indigo-400/10 blur-xl group-hover:opacity-70 transition-opacity duration-700"></div>
              
              <div class="absolute inset-0 bg-gradient-to-tr from-blue-600/5 to-indigo-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
              <img 
                :src="product.image || getImagePath('/shunganjiao1.png')" 
                :alt="product.name"
                loading="lazy"
                class="w-full h-full object-contain group-hover:scale-105 transition-transform duration-700"
              />
            </div>
            <div class="p-4 md:p-6">
              <div class="flex justify-between items-start mb-2 md:mb-3 gap-2">
                <h3 class="text-lg md:text-xl font-bold text-gray-800 hover:text-blue-600 transition-colors flex-1">{{ product.name }}</h3>
                <span :class="['px-2 md:px-3 py-1 rounded-full text-xs flex-shrink-0', getCategoryBadgeClass(product.categoryId)]">{{ product.categoryName }}</span>
              </div>
              <p class="text-gray-600 mb-4 md:mb-5 line-clamp-3 leading-relaxed text-sm md:text-base">{{ product.description }}</p>
              <div class="flex flex-wrap gap-2 mb-5">
                <span v-for="(feature, i) in product.features" :key="i" class="bg-gray-100 text-gray-600 px-2 py-1 rounded text-xs hover:bg-blue-50 hover:text-blue-600 transition-all duration-700">
                  {{ feature }}
                </span>
              </div>
              <router-link 
                :to="`/products/${product.id}`"
                class="block w-full py-3 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 transition-all duration-300 shadow-sm hover:shadow text-white font-medium rounded-lg text-center"
              >
                查看详情
              </router-link>
            </div>
          </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination-wrapper mt-16" v-if="totalPages > 1">
          <div class="pagination-container">
            <!-- 上一页 -->
            <button 
              @click="goToPrevPage"
              :disabled="currentPage === 1"
              class="pagination-btn pagination-btn-prev"
              :class="{ 'disabled': currentPage === 1 }"
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
              </svg>
            </button>
            
            <!-- 页码 -->
            <div class="pagination-pages">
              <button
                v-for="page in pageNumbers"
                :key="page"
                @click="goToPage(page)"
                class="pagination-page"
                :class="{ 'active': page === currentPage }"
              >
                {{ page }}
              </button>
            </div>
            
            <!-- 下一页 -->
            <button 
              @click="goToNextPage"
              :disabled="currentPage === totalPages"
              class="pagination-btn pagination-btn-next"
              :class="{ 'disabled': currentPage === totalPages }"
            >
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 应用领域 -->
    <section class="application-fields py-24 bg-white" ref="fieldsRef">
      <div class="container mx-auto px-4">
        <div class="flex flex-col items-center mb-20 opacity-0 transform translate-y-8 transition-all duration-700" ref="fieldsTitleRef">
          <div class="w-24 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6 rounded-full"></div>
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700">应用领域</h2>
          <p class="text-gray-600 max-w-2xl text-center">我们的产品广泛应用于各个行业</p>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-6">
          <div 
            v-for="field in applicationFields" 
            :key="field.id"
            class="field-item bg-gradient-to-br from-gray-50 to-gray-100 p-6 rounded-xl text-center hover:bg-gradient-to-br hover:from-blue-50 hover:to-blue-100 transition-all duration-700 transform hover:-translate-y-2 hover:shadow-md opacity-0 translate-y-10 group relative overflow-hidden"
                 :style="{ borderTop: '3px solid ' + getFieldColor(field.id) }"
          >
            <div class="w-16 h-16 mx-auto mb-3 flex items-center justify-center rounded-full bg-white shadow-sm text-blue-600 group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-indigo-600 group-hover:text-white transition-all duration-500">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path :d="field.iconPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
              </svg>
            </div>
            <h3 class="font-bold text-gray-800 group-hover:text-blue-700 transition-colors duration-300">{{ field.name }}</h3>
          </div>
        </div>
      </div>
    </section>
    
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import NavBar from '@/components/NavBar.vue'
import Footer from '@/components/Footer.vue'
import { products } from '@/data/products'
import { getImagePath } from '@/utils/imageMap'

// 滚动监听相关引用
const productsListRef = ref<HTMLElement>()
const productsTitleRef = ref<HTMLElement>()
const fieldsRef = ref<HTMLElement>()
const fieldsTitleRef = ref<HTMLElement>()

// 检测元素是否在视口中
const isInViewport = (element: HTMLElement | undefined) => {
  if (!element) return false
  const rect = element.getBoundingClientRect()
  return (
    rect.top <= window.innerHeight * 0.8 &&
    rect.bottom >= 0
  )
}

// 获取分类对应的颜色
const getCategoryColor = (categoryId: number) => {
  const colorMap: Record<number, string> = {
    0: '#409eff', // 全部产品 - 蓝色
    1: '#67c23a', // 环氧树脂胶 - 绿色
    2: '#e6a23c', // 瞬干胶 - 黄色
    3: '#f56c6c', // UV胶 - 红色
    4: '#909399', // 结构胶 - 灰色
    5: '#8543e0', // 厌氧胶 - 紫色
    6: '#409eff'  // 热熔胶 - 蓝色
  }
  return colorMap[categoryId] || '#409eff'
}

// 获取分类标签样式
const getCategoryBadgeClass = (categoryId: number) => {
  const badgeMap: Record<number, string> = {
    0: 'bg-gradient-to-r from-blue-100 to-blue-200 text-blue-700',
    1: 'bg-gradient-to-r from-green-100 to-green-200 text-green-700',
    2: 'bg-gradient-to-r from-yellow-100 to-yellow-200 text-yellow-700',
    3: 'bg-gradient-to-r from-red-100 to-red-200 text-red-700',
    4: 'bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700',
    5: 'bg-gradient-to-r from-purple-100 to-purple-200 text-purple-700',
    6: 'bg-gradient-to-r from-blue-100 to-blue-200 text-blue-700'
  }
  return badgeMap[categoryId] || 'bg-gradient-to-r from-blue-100 to-indigo-100 text-blue-700'
}

// 获取应用领域对应的颜色
const getFieldColor = (fieldId: number) => {
  const colors = [
    '#409eff', '#67c23a', '#e6a23c', '#f56c6c',
    '#909399', '#8543e0', '#409eff', '#67c23a'
  ]
  return colors[fieldId - 1] || '#409eff'
}

// 监听滚动，触发动画
const animateOnScroll = () => {
  // 产品列表部分动画
  if (productsTitleRef.value && isInViewport(productsTitleRef.value)) {
    productsTitleRef.value.style.opacity = '1'
    productsTitleRef.value.style.transform = 'translateY(0)'
  }
  
  // 获取当前显示的产品卡片
  const productCards = productsListRef.value?.querySelectorAll('.product-card') || []
  productCards.forEach((product: Element, index: number) => {
    if (product && isInViewport(product as HTMLElement)) {
      setTimeout(() => {
        if (product instanceof HTMLElement) {
          product.style.opacity = '1'
          product.style.transform = 'translateY(0)'
          product.style.transition = `opacity 0.7s ease, transform 0.7s ease`
        }
      }, 100 + index * 100)
    }
  })
  
  // 应用领域部分动画
  if (fieldsTitleRef.value && isInViewport(fieldsTitleRef.value)) {
    fieldsTitleRef.value.style.opacity = '1'
    fieldsTitleRef.value.style.transform = 'translateY(0)'
  }
  
  const fieldItems = fieldsRef.value?.querySelectorAll('.field-item') || []
  fieldItems.forEach((field: Element, index: number) => {
    if (field && isInViewport(field as HTMLElement)) {
      setTimeout(() => {
        if (field instanceof HTMLElement) {
          field.style.opacity = '1'
          field.style.transform = 'translateY(0)'
          field.style.transition = `opacity 0.7s ease, transform 0.7s ease`
        }
      }, 100 + index * 50)
    }
  })
}

// 产品分类数据
const categories = [
  { id: 0, name: '全部产品' },
  { id: 1, name: 'RTV有机硅胶' },
  { id: 2, name: '瞬干胶' },
 
  { id: 4, name: '表面处理剂' },
  { id: 5, name: '热硫化胶水' },
  { id: 6, name: '工业解胶剂' },
  
]

// 应用领域数据
const applicationFields = [
  { id: 1, name: '电子行业', iconPath: 'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z' },
  { id: 2, name: '汽车制造', iconPath: 'M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z M12 14a4 4 0 00-4-4V5a2 2 0 012-2h4a2 2 0 012 2v5a4 4 0 00-4 4zm7 2a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 011-1h12a1 1 0 011 1v3z' },
  { id: 3, name: '医疗设备', iconPath: 'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z' },
  { id: 4, name: '建筑工程', iconPath: 'M3 10h18M3 14h18M12 3v18m-8.28 4.9a5 5 0 0013.44 0M11.71 8.9a5 5 0 0110.58 0' },
  { id: 5, name: '航空航天', iconPath: 'M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 01-2-2z' },
  { id: 6, name: '包装行业', iconPath: 'M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z' },
  { id: 7, name: '木工家具', iconPath: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4' },
  { id: 8, name: '新能源', iconPath: 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z' },
]

// 响应式数据
const activeCategory = ref(0)
const currentPage = ref(1)
const pageSize = ref(6)

// 计算属性：过滤后的产品列表
const filteredProducts = computed(() => {
  if (activeCategory.value === 0) {
    return products
  }
  return products.filter(product => product.categoryId === activeCategory.value)
})

// 当前页显示的产品
const displayProducts = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = currentPage.value * pageSize.value
  return filteredProducts.value.slice(start, end)
})

// 分页相关计算
const total = computed(() => filteredProducts.value.length)
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))

// 页码数组
const pageNumbers = computed(() => {
  const pages: (number | string)[] = []
  const maxPages = 5 // 最多显示5个页码
  
  if (totalPages.value <= maxPages) {
    // 如果总页数小于等于5，显示所有页码
    for (let i = 1; i <= totalPages.value; i++) {
      pages.push(i)
    }
  } else {
    // 总页数大于5时，显示当前页及其前后的页码
    if (currentPage.value <= 3) {
      // 前面几页
      for (let i = 1; i <= 4; i++) {
        pages.push(i)
      }
      pages.push('...')
      pages.push(totalPages.value)
    } else if (currentPage.value >= totalPages.value - 2) {
      // 后面几页
      pages.push(1)
      pages.push('...')
      for (let i = totalPages.value - 3; i <= totalPages.value; i++) {
        pages.push(i)
      }
    } else {
      // 中间页
      pages.push(1)
      pages.push('...')
      for (let i = currentPage.value - 1; i <= currentPage.value + 1; i++) {
        pages.push(i)
      }
      pages.push('...')
      pages.push(totalPages.value)
    }
  }
  
  return pages
})

// 分页导航函数
const goToPage = (page: number | string) => {
  if (page === '...') return
  const pageNum = typeof page === 'number' ? page : parseInt(page)
  if (pageNum !== currentPage.value && pageNum >= 1 && pageNum <= totalPages.value) {
    currentPage.value = pageNum
    scrollToTop()
    setTimeout(() => {
      resetProductAnimations()
      animateOnScroll()
    }, 100)
  }
}

const goToPrevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    scrollToTop()
    setTimeout(() => {
      resetProductAnimations()
      animateOnScroll()
    }, 100)
  }
}

const goToNextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    scrollToTop()
    setTimeout(() => {
      resetProductAnimations()
      animateOnScroll()
    }, 100)
  }
}

// 滚动到顶部
const scrollToTop = () => {
  productsListRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}

// 监听分类变化，重置页码
watch(activeCategory, () => {
  currentPage.value = 1
  setTimeout(() => {
    resetProductAnimations()
    animateOnScroll()
  }, 100)
})

// 重置产品卡片动画
const resetProductAnimations = () => {
  const productCards = productsListRef.value?.querySelectorAll('.product-card') || []
  productCards.forEach((product: Element) => {
    if (product instanceof HTMLElement) {
      product.style.opacity = '0'
      product.style.transform = 'translateY(20px)'
    }
  })
}

onMounted(() => {
  // 初始化所有元素的过渡样式
  const productCards = productsListRef.value?.querySelectorAll('.product-card') || []
  productCards.forEach((product: Element) => {
    if (product instanceof HTMLElement) {
      product.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
    }
  })
  
  const fieldItems = fieldsRef.value?.querySelectorAll('.field-item') || []
  fieldItems.forEach((field: Element) => {
    if (field instanceof HTMLElement) {
      field.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
    }
  })
  
  // 初始触发一次
  setTimeout(animateOnScroll, 100)
  
  // 监听滚动事件
  window.addEventListener('scroll', animateOnScroll)
})

onUnmounted(() => {
  // 移除滚动事件监听
  window.removeEventListener('scroll', animateOnScroll)
})
</script>

<style scoped>
.products-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.pagination-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 上一页下一页按钮 */
.pagination-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0;
}

.pagination-btn:hover:not(.disabled) {
  color: #3b82f6;
  border-color: #3b82f6;
  background: #ecf5ff;
}

.pagination-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 页码容器 */
.pagination-pages {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 页码按钮 */
.pagination-page {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
  font-weight: 500;
}

.pagination-page:hover {
  color: #3b82f6;
  border-color: #3b82f6;
  background: #ecf5ff;
}

.pagination-page.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
  font-weight: 600;
}

.pagination-page.active:hover {
  background: #2563eb;
  border-color: #2563eb;
}

/* 动画类 */
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}

.animate-bounce {
  animation: bounce 2s infinite;
}

.animate-slow-pulse {
  animation: slowPulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.delay-100 {
  animation-delay: 0.1s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes slowPulse {
  0%, 100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(1.1);
  }
}
</style>
